<template>
	<view class="container">
		<LuckyWheel ref="myLucky" :blocks="blocks" :prizes="prizes" :buttons="buttons" :defaultStyle="defaultStyle"
			@start="handlePayment" @end="endCallBack" />

		<!-- 评论按钮 -->
		<view class="comment-btn" @click="showCommentPanel">
			<text>قاتنىشىش قائىدىسى ۋە تەرتىپى</text>
		</view>
	</view>
	<view class="content">

		<max-title-min title="ئاشكارلاش سەھنىسى" :isIcon="false"></max-title-min>
		<view class="content-title">
			<view style="width: 30%;text-align: center;">ئابونىت ئىسمى</view>
			<view style="width: 30%;text-align: center;">مۇكاپات تۈرى</view>
			<view style="width: 30%;text-align: center;">قاتناشقان ۋاقىت</view>
		</view>

		<swiper display-multiple-items="6" autoplay="true" circular="true" vertical="true"
			style="width: 100%;height: 600rpx;font-size: 22rpx;">
			<swiper-item class="content-title" style="padding: 10rpx ; padding-right: 30rpx;"
				v-for="item in prizesUser">
				<view style="display: flex; align-items: center; justify-content: center; width: 30%;">
					<img :src="item.imageUrl" style="width: 70rpx; height: 70rpx;padding-right: 5rpx;"></img>
					<view>{{ item.username }}</view>
				</view>
				<view style="width: 30%;text-align: center;">{{ item.prizes }}</view>
				<view style="width: 30%;text-align: center;">{{ item.time }}</view>
			</swiper-item>
		</swiper>
	</view>

	<view @click.stop="showCoinPanel(10)" class="alpaysCount-title">چەك تارتىش خاتىرىسى</view>
	<view style="padding-top: 30rpx;"></view>


	<!-- 评论面板 -->
	<view style="padding-bottom: 40rpx;" v-if="isMianban" @click.stop
		:class="['comment-panel', { 'show': isEpisodesVisible }]"
		:style="{ transform: isEpisodesVisible ? 'translateY(0)' : 'translateY(100%)', 'transition': 'transform 0.3s ease' }">
		<view class="panel-header">
			<text>{{ titleContent }}</text>
			<uni-icons type="closeempty" :size="25" @click="hideEpisodesPanel"></uni-icons>
		</view>
		<scroll-view scroll-y class="comment-list" @touchmove.stop>
			<!-- 奖品兑现 -->
			<view class="comment-content" v-if="isComponent == 1">
				<view class="comment-item">ئابونىت ئىسمى : {{ user.username }}</view>
				<view class="comment-item">ئابونىت رەت نومۇرى : ArTv{{ user.id }}</view>
				<view class="comment-item">مۇكاپات تۈرى : {{ conText }}</view>
				<view class="comment-item">قاتناشقان ۋاقىت : {{ conTime }}</view>
				<view class="comment-item" style="font-weight: bold;">مۇكاپاتنىڭ مۇناسىۋەتلىك رەسىمى</view>
				<view class="comment-img">
					<img style="width: 100%; height: 100%;border-radius: 20rpx;" :src="conImgs"></img>
				</view>
				<view class="duihuan" @click="checkPayStatus" v-if="conDays">نەقلەشتۈرۈش</view>
				<view class="duihuan" v-if="!conDays">مۇلازىمەتچى بىلەن ئالاقىلىشىڭ</view>
			</view>

			<!-- 活动规则说明 -->
			<view class="comment-content" v-if="isComponent == 2">
				<view v-for="item in contextContent">
					<view style="font-weight: bold; font-size: 30rpx; padding: 10rpx;" class="comment-item">{{
						item.title }}</view>
					<view class="comment-item" v-for="value in item.text">{{ value.text }}</view>
				</view>
			</view>

			<!-- 抽奖历史 v-for="item in 10"-->
			<view v-if="isComponent == 3">
				<view style="padding: 10rpx ; padding-right: 30rpx; font-size: 22rpx;"
					class="comment-lishi comment-item" v-for="item in prizesUserList">
					<view style="display: flex; align-items: center; justify-content: center; width: 30%;">
						<img :src="item.imageUrl" style="width: 70rpx; height: 70rpx;padding-right: 5rpx;"></img>
						<view>{{ item.username }}</view>
					</view>
					<view style="width: 30%;text-align: center;">{{ item.prizes }}</view>
					<view style="width: 30%;text-align: center;">{{ item.time }}</view>

				</view>
			</view>


		</scroll-view>
	</view>
</template>

<script setup>
import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘
import {
	loginUpdateStatus
} from '@/API/geidApis.js';
import {
	getLotteryPrizes,
	getLotteryPrizesUser,
	saveLotteryPrizes
} from '@/API/alpayApis.js';
import { wechatPayment, handlePaymentResult } from '@/utils/wechat-payment.js';
import { ref, nextTick } from 'vue';
const myLucky = ref('');
const blocks = ref([{ padding: '13px', background: '#617df2' }])
const isMianban = ref(false);
const isEpisodesVisible = ref(false);
const titleContent = ref('مۇكاپات ئۇچۇرى');
const isComponent = ref(1);
const conText = ref('');
const conTime = ref('');
const conImgs = ref('');
const conDays = ref('');
const user = ref({});
const paypalCount = ref(0);
const prizesUser = ref([]);
const prizesUserList = ref([]);
const prizes = ref([
	// 
	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0
		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#e9e8fe',
		range: 0
	},
	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0
		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#b8c5f2',
		range: 0
	},
	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0
		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#b8c5f2',
		range: 0
	},
	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0

		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#e9e8fe',
		range: 0
	},

	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0
		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#b8c5f2',
		range: 0
	},
	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0
		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#b8c5f2',
		range: 0
	},
	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0
		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#e9e8fe',
		range: 0
	},
	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0
		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#b8c5f2',
		range: 0
	},
	{
		fonts: [{
			text: '',
			top: '10%',
			fontSize: '13px',
			time: 0
		}],
		imgs: [{
			src: '',
			top: '40%',
			width: '45px'
		}],
		background: '#b8c5f2',
		range: 0
	},

]);
const buttons = ref([{
	radius: '50px',
	background: '#617df2'
},
{
	radius: '45px',
	background: '#afc8ff'
},
{
	radius: '40px',
	background: '#869cfa',
	pointer: true,
	fonts: [{
		// text: '开始\n抽奖',
		text: 'باشلاش',
		top: '-10px'
	}]
},
])

function showCommentPanel() {
	isMianban.value = true;
	// 使用 $nextTick 确保 DOM 更新后再触发动画
	nextTick(() => {
		setTimeout(() => {
			isEpisodesVisible.value = true;
			titleContent.value = 'پائالىيەت قائىدىسى';
			isComponent.value = 2;
		}, 50);
	});
}

// 隐藏评论面板
function hideEpisodesPanel() {
	if (paypalCount.value !== 0) {
		uni.showToast({
			title: 'ئاۋۋال نەقلەشتۈرۋىلىڭ',
			icon: 'none',
			duration: 2000
		});
		return;
	}
	isEpisodesVisible.value = false;
	setTimeout(() => {
		isMianban.value = false;
	}, 300);
}

// 点击抽奖按钮触发回调
function startCallBack() {
	// 先开始旋转
	myLucky.value.play()
	// 使用定时器来模拟请求接口
	setTimeout(() => {
		// 假设后端返回的中奖索引是0
		//const index = 0
		// 调用stop停止旋转并传递中奖索引
		myLucky.value.stop();
		//this.$refs.myLucky.stop(index)
	}, 3000)
}
// 抽奖结束触发回调
function endCallBack(prize) {
	// 奖品详情
	console.log(prize.imgs[0].src);
	console.log(prize.fonts[0].text);
	isMianban.value = true;
	isComponent.value = 1;
	// 使用 $nextTick 确保 DOM 更新后再触发动画
	nextTick(() => {
		setTimeout(() => {
			conText.value = prize.fonts[0].text;
			conDays.value = prize.fonts[0]?.time;
			paypalCount.value = prize.fonts[0]?.time;
			conImgs.value = prize.imgs[0].src;
			conTime.value = formatTimestamp(new Date().getTime());
			isEpisodesVisible.value = true;
			titleContent.value = 'مۇكاپات ئۇچۇرى';
			saveLotteryPrizesFunction(user.value.id, user.value.username, user.value.userImg, prize.fonts[0].text);
		}, 50);
	});

}
// 存储用户抽奖记录
const saveLotteryPrizesFunction = async (userId, username, userImg, text) => {
	let res = await saveLotteryPrizes(userId, username, userImg, text);
}
// 时间码转换
function formatTimestamp(timestamp) {
	const date = new Date(timestamp);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
	const day = String(date.getDate()).padStart(2, '0');
	const hour = String(date.getHours()).padStart(2, '0');
	const minute = String(date.getMinutes()).padStart(2, '0');

	return `${year}-${month}-${day} ${hour}:${minute}`;
}
const showCoinPanel = async (index) => {
	console.log("会员周期：", index);
	let res = await getLotteryPrizesUser(user.value.id);
	for (let i = 0; i < res.list.length; i++) {
		res.list[i].time = formatTimestamp(res.list[i].gmtCreate);
	}
	prizesUserList.value = res.list;
	isMianban.value = true;
	// 使用 $nextTick 确保 DOM 更新后再触发动画
	nextTick(() => {
		setTimeout(() => {
			isEpisodesVisible.value = true;
			titleContent.value = 'چەك تارتىش خاتىرىسى';
			isComponent.value = 3;
		}, 50);
	});
}


// 处理支付（优化版）
const handlePayment = async () => {
	try {
		// 检查基本参数
		const days = 10;
		const paymentAmount = 1;
		const user = uni.getStorageSync("user");
		const openid = user.openId;
		// 验证用户登录
		if (!user) {
			uni.showToast({
				title: 'ئاۋۋال تىزىملىتىڭ',
				icon: 'none'
			});
			return;
		}

		// 调用微信支付
		const result = await wechatPayment({
			days: days,
			amount: paymentAmount,
			openid: openid
		});

		// 处理支付结果
		const success = handlePaymentResult(result);

		if (success) {
			startCallBack();

			// 支付成功后的逻辑
			// checkPayStatus(user.id, days, paymentAmount);
		}

	} catch (error) {
		console.error('支付错误:', error);
		let errorMessage = '支付失败';

		if (error.message) {
			if (error.message.includes('cancel')) {
				errorMessage = '用户取消支付';
			} else if (error.message.includes('permission')) {
				errorMessage = '支付权限验证失败';
			} else if (error.message.includes('不可用')) {
				errorMessage = '支付功能未就绪';
			}
		}
		uni.showToast({ title: errorMessage, icon: 'none' });
	}
}

// 查询支付状态
const checkPayStatus = async () => {
	uni.showLoading({
		title: 'نەقلەشتۈرۋاتىدۇ',
		mask: true
	});
	const user = uni.getStorageSync("user");
	let now = new Date();
	// 创建一个新的日期对象，增加一n天
	let oneDayLater = new Date(now);
	oneDayLater.setDate(now.getDate() + conDays.value);
	console.log("time个天后的时间戳是：" + oneDayLater.getTime());
	const result = await loginUpdateStatus(user.id, oneDayLater.getTime());
	uni.removeStorageSync('user');
	uni.hideLoading();
	paypalCount.value = 0;
	uni.showToast({
		title: 'يىڭلىنىپ بولدى',
	});
	uni.setStorageSync('user', result);
	users.value = {};
	users.value = result;
	timeStatus.value = formatTimestamp(result.statusCreate);
	const shareUserId = uni.getStorageSync('ShareUserId')
	if (shareUserId > 0) {
		uni.request({
			url: 'https://min.erkantv.cn:8083/h5/openId/money',
			method: 'GET',
			data: {
				userId: shareUserId,
				money: 10 / 2,
				close: true
			},
			success: (e) => {
				console.log("给推荐用户分红成功！")
				uni.removeStorageSync('ShareUserId')
			}
		})
	}





}

// 更换prizes的图片等数据
const changePrizes = async () => {
	user.value = uni.getStorageSync("user");
	let res = await getLotteryPrizes();
	console.log("奖品：", res);
	for (let i = 0; i < res.length; i++) {
		prizes.value[i].fonts[0].text = res[i].text;
		prizes.value[i].fonts[0].time = res[i]?.time;
		prizes.value[i].imgs[0].src = res[i].src;
		prizes.value[i].range = res[i].ranges;
		prizes.value[i].fonts[0].time = res[i]?.time;
	}
}
const prizesUserInfo = async () => {
	let res = await getLotteryPrizesUser(0);
	for (let i = 0; i < res.list.length; i++) {
		res.list[i].time = formatTimestamp(res.list[i].gmtCreate);
	}
	prizesUser.value = res.list;
}
prizesUserInfo();
changePrizes();

const contextContent = ref([
	{ title: 'ئايلانما چەك تارتىش پائالىيىتىنىڭ قائىدىسى ۋە سەمىمى  ئەسكەرتمىسى', text: [{ text: 'بۇ سۇپىدا يولغا قويۇلغان چەك تارتىش پائالىيىتىگە قاتناشقانلىقىڭىزنى قارشى ئالىمىز ! چەك تارتىشنى باشلاشتىن بۇرۇن ، تۆۋەندىكى پائالىيەت قائىدىسى ۋە مۇھىم ئەسكەرتىشلەرنى تەپسىلىي ئوقۇپ ۋە چۈشىنىپ ، خاتا چۈشىنىپ قېلىش ياكى زۆرۈر بولمىغان ئاۋارىچىلىقلارنىڭ كېلىپ چىقىشىدىن ساقلىنىشىڭىزنى سورايمىز' }] },
	{ title: 'قاتنىشىش ئۇسۇلى', text: [{ text: 'ئابۇنىتلار بەلگىلەنگەن پۇل تۆلەش ئارقىلىق بىر قېتىم چەك تارتىش پۇرسىتى سېتىۋالسا بولىدۇ ، ھەر قېتىم چەك تارتىش پائالىيىتىگە پەقەت بىر قېتىملا قاتنىشالايدۇ . يەنە بىر قېتىم چەك تارتىشقا توغرا كەلسە ، چەك تارتىش قېتىم سانىنى قايتىدىن سېتىۋېلىشقا توغرا كېلىدۇ ، جەملەپ ئىشلىتىشكە بولمايدۇ' }] },
	{ title: '% 100 لىك مۇكاپات چىقىش مېخانىزمى ', text: [{ text: 'بۇ پائالىيەتتە % 100 مۇكاپات چىقىدىغان بولۇپ ، ھەر قېتىملىق چەك تارتىشتا مۇناسىپ مۇكاپات ياكى مۇكاپاتقا ئېرىشكىلى بولىدۇ' }] },
	{ title: 'مۇكاپات بۇيۇمىنىڭ مەزمۇن چۈشەندۈرۈشى', text: [{ text: 'ئايلانما دىسكىدا كۆرسىتىلگەن مۇكاپات بۇيۇملىرى تەقلىدىي ئېففېكتلىق رەسىم بولۇپ ، پەقەت كۆرۈش ئۈنۈمىنى كۆرسىتىشكىلا ئىشلىتىلىدۇ ، ئەمەلىيەتتە مۇكاپات بۇيۇملىرىدا ئەمەلىي بۇيۇم ئۆلچەم قىلىنىدۇ . مۇكاپاتنىڭ ئۇسلۇبى ، رەڭگى ، ئۆلچىمىدە ئىنچىكە پەرق بولۇشى مۇمكىن ، سۈرەت بىلەن ئەمەلىي بۇيۇمنىڭ پەرقى تۈپەيلىدىن كېلىپ چىققان تالاش - تارتىش ياكى ئالماشتۇرۇشنى قوللىمايدۇ' }] },
	{ title: ' مۇكاپات بۇيۇملىرىنىڭ ئىگىدارلىق ھوقۇقى ', text: [{ text: 'بارلىق مۇكاپات بۇيۇملىرىنىڭ ئىگىدارلىق ھوقۇقى ۋە ئەڭ ئاخىرقى چۈشەندۈرۈش ھوقۇقى بۇ شىركەتنىڭ ئىگىدارلىقىدا بولىدۇ . شىركەت خەزىنە ئەھۋالىغا ئاساسەن مۇكاپات بۇيۇمىنى تەڭ قىممەتلىك ياكى تېخىمۇ يۇقىرى قىممەتتە ئالماشتۇرۇشقا ھوقۇقلۇق ، ئايرىم ئۇقتۇرۇش قىلىنمايدۇ' }] },
	{ title: 'مۇكاپات بويۇمىنى نەقلەشتۈرۈش', text: [{ text: 'مۇكاپات چىققاندىن كېيىن ، سىستېما ئەسكەرتمىسى بويىچە مەشغۇلات قىلسىڭىز بولىدۇ' }] },
	{ title: 'مۇھىم ئەسكەرتىش ۋە جاۋابكارلىقنى كەچۈرۈم قىلىش باياناتى', text: [{ text: 'بۇ قېتىمقى پائالىيەت تەقلىدىي خاراكتېردىكى كۆڭۈل ئېچىش پائالىيىتى بولۇپ ، ئابۇنىتلارنىڭ قاتنىشىشى ئۆز ئىختىيارلىقى بىلەن بولغان قىلمىش دەپ قارىلىدۇ ، چىقىم قىلىش ھەققى كۆڭۈل ئېچىش تەسىراتىغا ئېرىشىش ئۈچۈن مۇلازىمەت ھەققى بولۇپ ، پۇل قايتۇرۇشنى ، ئۆتۈنۈپ بېرىشنى ، نەق پۇلغا ئالماشتۇرۇشنى قوللىمايدۇ' }, { text: 'سېتىۋېلىشتىن بۇرۇن ئويلىشىپ ، پائالىيەت قائىدىسىنى چۈشەنگەندىن كېيىن ئاندىن پۇل تۆلەش مەشغۇلاتى قىلىڭ' }, { text: 'بۇ شىركەت « كۆڭۈلگە ياقمىغان مۇكاپات بۇيۇمى » ، « مۇكاپات بۇيۇمى بىلەن كۈتكەن نەتىجە بىردەك ئەمەس » قاتارلىق سەۋەبلەر بىلەن ئوتتۇرىغا قويغان پۇل قايتۇرۇش ياكى تۆلەم تەلەپ قىلىش تەلىپىنى قوبۇل قىلمايدۇ' }, { text: 'يامان غەرەزدە چەك تارتىش ، ساختىلىق قىلىش ، تېخنىكا ۋاسىتىسىدىن پايدىلىنىپ ئادىللىققا كاشىلا قىلىدىغان ھەرقانداق قىلمىش چەكلىنىدۇ ، بايقالغان ھامان چەك تارتىشقا قاتنىشىش سالاھىيىتى بىكار قىلىنىدۇ ھەمدە قانۇن جاۋابكارلىقىنى سۈرۈشتۈرۈش ھوقۇقى ساقلاپ قېلىنىدۇ' }, { text: 'ائالىيەت سىستېما ئاسراش ، سىياسەتنى تەڭشەش قاتارلىق سەۋەبلەر تۈپەيلىدىن ۋاقتىنچە توختىتىلىشى ياكى توختىتىلىشى مۇمكىن ، شىركەت ئالدىن ئېلان قىلىدۇ ، يېڭى ئۇقتۇرۇشقا دىققەت قىلىڭ' }] },
	{ title: 'خېرىدارلار مۇلازىمىتى', text: [{ text: 'ئەگەر پائالىيەت قائىدىسى ، چەك تارتىش تەرتىپى ياكى مۇكاپات بۇيۇملىرى توغرىسىدا گۇمانىڭىز بولسا ، ھەر ۋاقىت تور مۇلازىمىتى بىلەن ئالاقىلىشىشىڭىزنى قارشى ئالىمىز ، بىز چىن كۆڭلىمىزدىن سىزگە جاۋاب بېرىمىز' }, { text: 'سىزنىڭ چۈشەنگىنىڭىزگە ۋە قوللىغىنىڭىزغا رەھمەت ، ئىشلىرىڭىزنىڭ ئوڭۇشلۇق بولۇشىنى ئۈمۈد قىلىمەن' }] },

]);
</script>
<style scoped>
.container {
	margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 30rpx;
	padding-bottom: 100rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
	position: relative;
	/* width: 92%;
	left: 4%; */
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	background: rgba(29, 29, 29, 0.8);
	backdrop-filter: blur(15px);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.5),
		inset 0 1px 1px rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.content {
	/* width: 92%; */
	/* direction: rtl; */
	background: rgba(29, 29, 29, 0.8);
	backdrop-filter: blur(15px);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.5),
		inset 0 1px 1px rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
	/* left: 4%; */
	border-radius: 20rpx;
	padding-bottom: 30rpx;
}

.content-title {
	width: 100%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	box-sizing: border-box;
}

.comment-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	z-index: 999;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.panel-header {
	direction: rtl;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 10rpx;
}

.panel-header text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}


.comment-list {
	max-height: 60vh;
	padding: 20rpx;
	direction: rtl;
	box-sizing: border-box;

}

.comment-content {
	padding: 0 30rpx;

}

.comment-item {
	padding: 10rpx 0;
	font-size: 28rpx;
	color: #333;
}

.comment-img {
	width: 100%;
	border-radius: 20rpx;
	overflow: hidden;
	box-sizing: border-box;
	padding: 30rpx;

}



.comment-btn {
	position: absolute;
	bottom: 0rpx;
	right: 0;
	left: 0;
	text-align: center;
	background-color: rgba(254, 0, 0, 0.3);
	color: #ff0000;
	padding: 12rpx 20rpx;
	border-top-right-radius: 40rpx;
	border-top-left-radius: 40rpx;
	backdrop-filter: blur(15px);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.5),
		inset 0 1px 1px rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.comment-btn text {
	font-size: 28rpx;
	font-weight: bold;
}

.comment-lishi {
	direction: rtl;
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.duihuan {
	background-color: #ff0000;
	text-align: center;
	padding: 20rpx 40rpx;
	width: 80%;
	box-sizing: border-box;
	position: relative;
	right: 10%;
	border-radius: 30rpx;
	margin-bottom: 50rpx
}


.alpaysCount-title {
	color: #fff;
	padding: 30rpx;
	margin-top: 30rpx;
	background-color: #ff0000;
	/* width: 92%;
	position: relative;
	left: 4%; */
	border-radius: 20rpx;
	box-sizing: border-box;
	text-align: center;
	font-weight: bold;
}
</style>